<template>
  <div class="update-name">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="修改昵称"
      left-text="取消"
      @click-left="$emit('close')"
      right-text="完成"
      @click-right="onFinish"
    />
    <!-- /顶部导航栏 -->

    <!-- 输入框 “修改昵称” -->
    <div class="field-wrap">
      <van-field
       v-model.trim="localName"
       rows="1"
       autosize
       type="textarea"
       maxlength="7"
       placeholder="请输入新昵称"
       show-word-limit
      />
    </div>
    <!-- /输入框 "修改昵称" -->
  </div>
</template>

<script>
import { updateUserprofile } from '@/api/user.js'
import { Toast } from 'vant'
export default {
  name: 'UpdateName',
  props: {
    value: { // 编辑面板中传过来的 user.name 这里的父传子 是通过v-model绑定传的
      type: String,
      required: true
    }
  },
  data () {
    return {
      localName: this.value // 输入框默认显示的昵称 为编辑资料 面板的昵称
    }
  },
  methods: {
    async onFinish () { // 点击“完成” 即刻发请求 将修改内容更新 请求完成后关闭弹出层
      Toast.loading({
        message: '保存中...',
        forbidClick: true, // 禁止背景点击
        loadingType: 'spinner', // 换个图标展示效果
        duration: 0 // 持续展示时间 默认是两秒 设置为0后一直展示 直到下一个Toast触发（请求成功或者失败将会触发一次Toast）
      })

      if (this.localName.length === 0) {
        Toast('昵称不能为空')
        return true
      }

      try {
        await updateUserprofile({
          name: this.localName
        })
        // 更新视图状态 显示新昵称
        this.$emit('input', this.localName)
        Toast('更新成功')
        this.$emit('close')
      } catch (err) {
        Toast('换名失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.field-wrap {
  padding-top: 15px;
}
</style>
